<!DOCTYPE html>
<html lang="en">

<head>
  <!-- !required meta tags -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Harbor Images</title>
  <!-- table main-mobile css -->
  <link rel="stylesheet" href="static/css/table/mainMobile.css" />
  <!-- table tablet css -->
  <link href="static/css/table/tablet.css" media="(min-width: 600px)" rel="stylesheet">
  <!-- table desktop css -->
  <link href="static/css/table/desktop.css" media="(min-width: 900px)" rel="stylesheet">
  <!-- icon font-awesome css -->
  <link href="static/css/all.min.css" rel="stylesheet">
  <!-- common css -->
  <link href="static/css/common_table.css" rel="stylesheet">
  <style>
    
    .table-img-rotate{
            animation:fadenum 5s infinite;
        }
        @keyframes fadenum{100%{transform:rotate(360deg);}}
  </style>
</head>

<body>
  <div id="wrapper">
    <nav class="navbar-side sidebar">
      <div class="nav-container">
        <a class="navbar-brand" href="/">
          <div>
            <img src="static/img/icons/etas.png" style="margin-left: -70px; margin-top: 3px;">
          </div>
        </a>
        <hr class="sidebar-divider">
        <ul class="navbar-nav" id="sidebar-ul">
          <li class="nav-item">
            <a class="nav-link" href="dashboard">
              <i class="fas fa-tachometer-alt"></i>
              <span style="margin-left: 5px;">Dashboard</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="images">
              <i class="fas fa-list"></i>
              <span style="margin-left: 5px;">Images</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="containers">
              <i class="fas fa-cloud"></i>
              <span style="margin-left: 5px;">Containers</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link " href="devices">
              <i class="fas fa-car"></i>
              <span style="margin-left: 5px;">Devices</span>
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="content-wrapper">
      <!--!Navbar Top-->
      <div class="navbar-top d-flex" id="page-top">
        <div class="container-fluid d-flex">
          <button id="sidebarToggleTop" class="btn-link" type="button"><i class="fas fa-bars"></i></button>
          <form class="navbar-search d-flex">
            <div class="input-group">
              <input class="nav-search" type="text" placeholder="Search for ...">
              <button class="btn btn-primary" type="button">
                <i class="fas fa-search"></i></button>
            </div>
          </form>
        </div>
        <ul class="navbar-nav-ul d-flex">
          <li class="nav-item">
            <a class="dropdown-toggle nav-link search-icon-nav" href="#"><i class="fas fa-search"></i></a>
          </li>

          <li class="nav-item notific-span">
            <a class="dropdown-toggle nav-link" href="#"><span>3+</span><i class="fas fa-bell fa-fw"></i></a>
          </li>
          <li class="nav-item notific-span">
            <a class="dropdown-toggle nav-link" href="#"><span class="badge bg-danger badge-counter">7</span><i
                class="fas fa-envelope fa-fw"></i></a>
          </li>
          <div class="topbar-divider"></div>
          <li class="nav-item avatar-n">
            <p><span class="avatar-text">SDVOS</span></p>
            <div class="avatar-nav"></div>
          </li>
        </ul>
      </div>
      <!--!Top-Nav Ends-->

      <!--!Index's Main contents start here-->
      <div class="index-content container-main">
        <div class="table-section-header d-flex justify-between">
          <h3 style="margin-left: 10px">Images</h3>
        </div>

        <!--!row-->
        <div class="row-table-container">
          <div class="table-content-row">
            <div class="user-setting margin-row-prof shadow-edit">
              <!--Table Row Header-->
              <div class="user-setting-head project-head">
                <h6>Image List Info</h6>
              </div>
              <!--Table Row body-->
              <div class="table-row-body project-body">
                <!--!Table Top head-->
                <div class="row-table-head margin-column-form d-flex justify-between">
                  <div class="table-head-col text-nowrap">
                    <div id="dataTable_length" class="dataTables_length" aria-controls="dataTable">
                      <label class="form-label d-flex">
                        Show&nbsp;
                        <select class="form-control">
                          <option value="10" selected="">10</option>
                          <option value="25">25</option>
                          <option value="50">50</option>
                          <option value="100">100</option>
                        </select>&nbsp;
                      </label>
                    </div>
                  </div>
                  <div class="table-head-col">
                    <div class="dataTables_filter" id="dataTable_filter"><label class="form-label"><input type="search"
                          class="form-control form-control-sm" aria-controls="dataTable" placeholder="Search"></label>
                    </div>
                  </div>
                </div>

                <!--!Table Itself-->
                <div class="table-itself margin-column-form">
                  <table>
                    <thead>
                      <tr>
                        <th>Project</th>
                        <th>Repository</th>
                        <th>Tag</th>
                        <th>Date</th>
                        <th>Device</th>
                        <th>Operate</th>
                      </tr>
                    </thead>
                    <tbody id="imageList">
                      
                    </tbody>
                  </table>
                </div>

                <!--!Table bottom head-->
                <div class="row-table-head d-flex justify-between">
                  <div class="table-head-col table-head-col2 text-nowrap">
                    <p id="dataTable_info" class="dataTables_info margin-column-form" role="status">Showing 1 to 10 of
                      2</p>
                  </div>
                  <div class="table-head-col d-flex flex-end">
                    <ul class="pagination margin-column-form d-flex">
                      <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
                      </li>
                      <li class="page-item active"><a class="page-link" href="#">1</a></li>
                      <!-- <li class="page-item"><a class="page-link" href="#">2</a></li>
                      <li class="page-item"><a class="page-link" href="#">3</a></li> -->
                      <li class="page-item"><a class="page-link" href="#" aria-label="Next"><span
                            aria-hidden="true">»</span></a></li>
                    </ul>
                  </div>
                </div>


              </div>
              <!--Table row body ends-->

            </div>

          </div>
        </div>

        <div class="footer">
          <footer>
            <span>Copyright © SDVOS 2022</span>
          </footer>
        </div>
      </div>

    </div>


    <a class="page-up-fixed" href="#page-top"><i class="fas fa-angle-up"></i></a>

  </div>

</body>
<script type="text/javascript">

    var imageTemplate = "<tr id=\"imageId\">"+
              "<td>projectName</td>"+
              "<td>imageName</td>"+
              "<td>imageTag</td>"+
              "<td>imageDate</td>"+
              "<td><select  class=\"dropbtn\"><i class=\"fas fa-scroll\"></i><option value=\"0\">Please select device</option></select></td>"+
              "<td><button class=\"deploybtn\" type=\"submit\" onclick=\"deployKantoImage(this);\"> Deploy</button></td>"+
              "</tr>";
    showImageList();
    function showImageList(){
      var xhr = new XMLHttpRequest();
      xhr.open('get', 'deviceList?online=1');
      xhr.send();
      xhr.onload = function() {
        var res = eval('(' + xhr.response + ')'); 
        var optionList = "";
        var optionTemplate = "<option value=\"0\">Please select device</option>";
        for (var i=0;i<res.length;i++){
          var device = res[i];
          var option = optionTemplate.replace("0",device.ip).replace("Please select device",device.name+'---'+device.ip);
          optionList = optionList+option;
        }
        imageTemplate = imageTemplate.replace("</select>",optionList+"</select>");
        var xhr2 = new XMLHttpRequest();
        xhr2.open('get', 'imageList');
        xhr2.send();
        xhr2.onload = function() {
          var res = eval('(' + xhr2.response + ')'); 
          for (var i=0;i<res.length;i++){
            var imageInfo = res[i];
            var imageRow = imageTemplate.replace("projectName",imageInfo.project)
            .replace("imageName",imageInfo.repository)
            .replace("imageTag",imageInfo.tag)
            .replace("imageDate",imageInfo.push_time)
            ;
            document.getElementById('imageList').insertAdjacentHTML('beforeend',imageRow);
          }
        };
      };
      
    }

    function deployKantoImage(e){
      var objSelect = e.parentNode.previousElementSibling.firstChild;
      var ip = objSelect.options[objSelect.selectedIndex].value;;
      var xhr = new XMLHttpRequest();
      xhr.open('post', 'deploy');
      xhr.send(ip);
    }

</script>
</html>